﻿@page "/diagramcomponent/remote-data"

@using Syncfusion.Blazor.Diagram
@using Syncfusion.Blazor.Data
@using System.Collections.ObjectModel
@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample demonstrates binding remote data with the diagram using the Data Manager support.</p>
</SampleDescription>
<ActionDescription>
    <p> This example shows how to generate a diagram from remote data such as REST APIs. The <code class="language-text">DataSourceSettings</code> property can be used to map an external data source with the diagram control. The <code class="language-text">Id</code> property of DataSourceSettings can be used to define a unique field of an external data. The <code class="language-text">ParentId</code> property can be used to define the relationship between objects. The <code class="language-text">SfDataManager</code> property can be used to fetch data from web services.</p>
</ActionDescription>
<div class="content-wrapper" style="width:100%">
    <div>
        <SfDiagramComponent @ref="Diagram" Height="400px" Tool="DiagramTools.ZoomPan" 
                            NodeDefaults="NodeDefaults" ConnectorDefaults="ConnectorDefaults" SetNodeTemplate="SetTemplate">
            <DataSourceSettings Id="EmployeeID" ParentId="ReportsTo">
                <SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/Employees" Adaptor="Syncfusion.Blazor.Adaptors.ODataV4Adaptor"></SfDataManager>
            </DataSourceSettings>
            <SnapSettings Constraints ="SnapConstraints.None"></SnapSettings>
            <Layout HorizontalSpacing="40" VerticalSpacing="40" Type="LayoutType.HierarchicalTree"></Layout>
        </SfDiagramComponent>
    </div>
</div>
@code{

    SfDiagramComponent Diagram;

    float x = 100;
    float y = 100;
    public class Employee
    {
        public int? EmployeeID { get; set; }
        public string FirstName { get; set; }
        public int? ReportsTo { get; set; }
    }
    Query Query = new Query().Select(new List<string>() { "EmployeeID", "ReportsTo", "FirstName" }).Take(9);
    private void NodeDefaults(IDiagramObject obj)
    {
        Node node = obj as Node;
        node.OffsetX = x;
        node.OffsetY = y;
        node.Width = 80;
        node.Height = 40;
        node.Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.Shapes.Basic, Shape = BasicShapes.Rectangle };
        node.Style = new ShapeStyle() { StrokeWidth = 0, Fill = "#048785" };
        x += 100;

        Employee data = System.Text.Json.JsonSerializer.Deserialize<Employee>(node.Data.ToString());
        node.Annotations = new DiagramObjectCollection<ShapeAnnotation>()
        {
            new ShapeAnnotation()
            {
                Content = data.FirstName,
                Style = new TextShapeStyle(){ Color = "white"}
            }
        };
    }
    private void ConnectorDefaults(IDiagramObject obj)
    {
        Connector connector = obj as Connector;
        connector.Style.StrokeColor = "#048785";
        connector.Type = Segments.Orthogonal;
        connector.TargetDecorator.Shape = DecoratorShapes.None;
        connector.SourceDecorator.Shape = DecoratorShapes.None;
    }
    private ICommonElement SetTemplate(IDiagramObject node)
    {
        return null;
    }

}
